<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/index/tab.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
			.clear p{
				line-height: 25px;
				
			}
			.clear {
				border-bottom: 1px dashed #ccc;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content">
			<div class="mui-content">
			  <div class="mui-row box-top" id="reback">
			        <div class="mui-col-sm-6 mui-col-xs-12 title-box">
			            <i class="mui-icon mui-icon-back"></i>
			        </div>
			        <div class="mui-col-sm-6 mui-col-xs-12">
			        </div>
			    </div>
			</div>
			<div class="mui-scroll-wrapper box-img">
				<div id="imgs" class="mui-scroll">
					<ul id="imgsUl"></ul>
				</div>
			</div>
			<!--  -->
			<div class="caremam-btn-con">
				<div class="mui-row box-top" id="reback">
			        <div class="mui-col-sm-12 mui-col-xs-12">
			            <button type="button" class="mui-btn mui-btn-success" id="blool">数据请求</button>
			        </div>
			 	</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script>
//			http://test.api.ynsufan.com/p2b/Project/List?model.skip=0&model.take=10
			(function() {
				var dataRow = []
				document.getElementById('blool').addEventListener('tap', function(){
					mui.ajax('http://test.api.ynsufan.com/p2b/Project/List?model.skip='+0+'&model.take='+10,{
						dataType:'json',//服务器返回json格式数据
						type:'get',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						headers:{
							'Content-Type':'application/json',
							token: '1j32ksie3j9jd893dd'
						},
						success:function(data){
							dataRow = data
							deawHtml(data)
							console.log(JSON.stringify(data))
						},
						error:function(xhr,type,errorThrown){
							console.log(errorThrown);
						}
					});
				})
				function deawHtml(data) {
					var uls = document.getElementById('imgsUl')
					function delet() {
						var ulsLi = uls.getElementsByTagName('li')
						if (ulsLi.length>=1) {
							uls.removeChild(ulsLi[0])
							delet()
						}
					}
					delet()

					for(var i =0; i<data.length; i++) {
						var li = document.createElement('li')
						li.className = 'clear'
						var p1 = document.createElement('p')
						p1.innerHTML = data[i].Title
						var p2 = document.createElement('p')
						p2.innerHTML = data[i].CompletePercent
						li.appendChild(p1)
						li.appendChild(p2)
						uls.appendChild(li)
					}
				}
			})()
		</script>
	</body>

</html>